import React, { memo, useEffect } from "react"
import { useDispatch } from "react-redux"
import { fetchRoomListAction } from "@/store/modules/entire/actionCreators"
import { EntireWrapper } from "./style"
import EntireFilter from "./entire-filter"
import EntirePagination from "./entire-pagination"
import EntireRooms from "./entire-rooms"
import { changeHeaderConfigAction } from "@/store/modules/main"

const Entire = memo(() => {
    const dispatch = useDispatch()

    useEffect(() => {
        dispatch(changeHeaderConfigAction({ isFixed: true, isHome: false }))
        dispatch(fetchRoomListAction())
    }, [dispatch])
    return (
        <EntireWrapper>
            <EntireFilter />
            <EntireRooms />
            <EntirePagination />
        </EntireWrapper>
    )
})

export default Entire
